<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 提示 -->
            <div class="hint">
              <p><span>注:</span><span>首页统计数据30分钟更新一次</span></p>
              <p><i class="el-icon-circle-close"></i></p>
            </div>
            <!-- 各类商家买家数据 -->
            <div class="shop_number">
              <div class="number">
                <div class="each"><p>买家数</p><p>{{userAmount.allUserAmount}}</p></div>
                <!-- <div class="each"><p>商家数</p><p>{{userAmount.allShopAmount}}</p></div> -->
                <div class="each"><p>今日新增买家</p><p>{{userAmount.todayNewUserAmount}}</p></div>
                <!-- <div class="each"><p>今日新增商家</p><p>{{userAmount.todayNewShopAmount}}</p></div> -->
                <div class="line"></div>
                <div class="each"><p>昨日注册买家</p><p>{{userAmount.yesterdayNewUserAmount}}</p></div>
                <!-- <div class="each"><p>昨日注册商家</p><p>{{userAmount.yesterdayNewShopAmount}}</p></div> -->
              </div>
              <div class="row_line"></div>
            </div>
            <!-- 概况 -->
            <div class="general_situation">
              <p class="title">概况</p>
              <div class="tabbar">
                <el-tabs v-model="activeName1" @tab-click="handleClick">
                  <el-tab-pane label="今日数据" name="first">
                    <div class="number">
                      <div class="each"><p>销售金额</p><p>{{today.todaySalesAmount}}</p></div>
                      <div class="each"><p>支付订单</p><p>{{today.todayOrderNum}}</p></div>
                      <div class="each"><p>成交订单</p><p>{{today.todayTurnoverNum}}</p></div>
                      <div class="each"><p>团长预估收入</p><p>{{today.todayAgentMoney}}</p></div>
                    </div>
                    <div class="number">
                      <div class="each"><p>退款金额</p><p>{{today.todayRefundMoney}}</p></div>
                      <div class="each"><p>支付金额</p><p>{{today.todayPayPrice}}</p></div>
                      <div class="each"><p>成交金额</p><p>{{today.todayTurnover}}</p></div>
                      <div class="each"><p>团长结算收入</p><p>{{today.todayShopMoney}}</p></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="昨日数据" name="second">
                   <div class="number">
                     <div class="each"><p>销售金额</p><p>{{yesterDay.yesterdaySalesAmount}}</p></div>
                     <div class="each"><p>支付订单</p><p>{{yesterDay.yesterdayOrderNum}}</p></div>
                     <div class="each"><p>成交订单</p><p>{{yesterDay.yesterdayTurnoverNum}}</p></div>
                     <div class="each"><p>团长预估收入</p><p>{{yesterDay.yesterdayAgentMoney}}</p></div>
                   </div>
                   <div class="number">
                     <div class="each"><p>退款金额</p><p>{{yesterDay.yesterdayRefundMoney}}</p></div>
                     <div class="each"><p>支付金额</p><p>{{yesterDay.yesterdayPayPrice}}</p></div>
                     <div class="each"><p>成交金额</p><p>{{yesterDay.yesterdayTurnover}}</p></div>
                     <div class="each"><p>团长结算收入</p><p>{{yesterDay.yesterdayShopMoney}}</p></div>
                   </div>
                  </el-tab-pane>
                  <el-tab-pane label="近七日" name="third">
                    <div class="number">
                      <div class="each"><p>销售金额</p><p>{{sevenDays.sevenDaysSalesAmount}}</p></div>
                      <div class="each"><p>支付订单</p><p>{{sevenDays.sevenDaysOrderNum}}</p></div>
                      <div class="each"><p>成交订单</p><p>{{sevenDays.sevenDaysTurnoverNum}}</p></div>
                      <div class="each"><p>团长预估收入</p><p>{{sevenDays.sevenDaysAgentMoney}}</p></div>
                    </div>
                    <div class="number">
                      <div class="each"><p>退款金额</p><p>{{sevenDays.sevenDaysRefundMoney}}</p></div>
                      <div class="each"><p>支付金额</p><p>{{sevenDays.sevenDaysPayPrice}}</p></div>
                      <div class="each"><p>成交金额</p><p>{{sevenDays.sevenDaysTurnover}}</p></div>
                      <div class="each"><p>团长结算收入</p><p>{{sevenDays.sevenDaysShopMoney}}</p></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="近30日数据" name="fourth">
                    <div class="number">
                      <div class="each"><p>销售金额</p><p>{{thirtyDays.thirtyDaysSalesAmount}}</p></div>
                      <div class="each"><p>支付订单</p><p>{{thirtyDays.thirtyDaysOrderNum}}</p></div>
                      <div class="each"><p>成交订单</p><p>{{thirtyDays.thirtyDaysTurnoverNum}}</p></div>
                      <div class="each"><p>团长预估收入</p><p>{{thirtyDays.thirtyDaysAgentMoney}}</p></div>
                    </div>
                    <div class="number">
                      <div class="each"><p>退款金额</p><p>{{thirtyDays.thirtyDaysRefundMoney}}</p></div>
                      <div class="each"><p>支付金额</p><p>{{thirtyDays.thirtyDaysPayPrice}}</p></div>
                      <div class="each"><p>成交金额</p><p>{{thirtyDays.thirtyDaysTurnover}}</p></div>
                      <div class="each"><p>团长结算收入</p><p>{{thirtyDays.thirtyDaysShopMoney}}</p></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="上月数据" name="five">
                    <div class="number">
                      <div class="each"><p>销售金额</p><p>{{lastMonth.lastMonthSalesAmount}}</p></div>
                      <div class="each"><p>支付订单</p><p>{{lastMonth.lastMonthOrderNum}}</p></div>
                      <div class="each"><p>成交订单</p><p>{{lastMonth.lastMonthTurnoverNum}}</p></div>
                      <div class="each"><p>团长预估收入</p><p>{{lastMonth.lastMonthAgentMoney}}</p></div>
                    </div>
                    <div class="number">
                      <div class="each"><p>退款金额</p><p>{{lastMonth.lastMonthRefundMoney}}</p></div>
                      <div class="each"><p>支付金额</p><p>{{lastMonth.lastMonthPayPrice}}</p></div>
                      <div class="each"><p>成交金额</p><p>{{lastMonth.lastMonthTurnover}}</p></div>
                      <div class="each"><p>团长结算收入</p><p>{{lastMonth.lastMonthShopMoney}}</p></div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'Index',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        userAmount:{},//注册用户数量
        today:{},//今日数据
        yesterDay:{},//昨日数据
        sevenDays:{},//近七日数据
        thirtyDays:{},//近30日数据
        lastMonth:{},//上一月数据
        activeName1: 'first',//概况显示第几个
        activeName2: 'first',//趋势图显示第几个
        orgOptions: {},//趋势图数据
      }
    },
    mounted(){
      this.getUserAmount();// 获取注册用户数量
      this.getToDay();//今日数据
      // echarts图数据
      this.orgOptions = {
        tooltip: {
          show: true, // 是否显示
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    },
    methods: {
      // 获取注册用户数量
      getUserAmount(){
        // this.$axios.post('http://192.168.10.108:8011/jxtapi/getUserAmount',{
        this.$axios.post(this.baseURL+'getUserAmount',{
          "requestSource":"PC"
        }).then((res)=>{
          //console.log(res,"买家数、商家数、今日新增、昨日注册数据");
          if(res.data.code==1){
            this.userAmount = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //今日数据
      getToDay(){
        this.$axios.post(this.baseURL+'today',{
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"今日数据");
          if(res.data.code==1){
            this.today = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 昨日数据
      getYesterDay(){
        this.$axios.post(this.baseURL+'yesterday',{
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"昨日数据");
          if(res.data.code==1){
            this.yesterDay = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 近七日数据
      getSevenDays(){
        this.$axios.post(this.baseURL+'sevenDays',{
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"近七日数据");
          if(res.data.code==1){
            this.sevenDays = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 近30日数据
      getThirtyDays(){
        this.$axios.post(this.baseURL+'thirtyDays',{
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"近30日数据");
          if(res.data.code==1){
            this.thirtyDays = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 上月数据
      getLastMonth(){
        this.$axios.post(this.baseURL+'lastMonth',{
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"上月数据");
          if(res.data.code==1){
            this.lastMonth = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 点击概况
      handleClick(row) {
        //console.log(row);
        if(row.index==0){
          this.getToDay();
        }else if(row.index==1){
          this.getYesterDay();
        }else if(row.index==2){
          this.getSevenDays();
        }else if(row.index==3){
          this.getThirtyDays();
        }else if(row.index==4){
          this.getLastMonth();
        }
      },
      // 点击趋势图
      handleClickTrend(row){
        console.log(row);
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  .hint{
    width: 100%;
    height: 30px;
    background-color: #f1dfcc;
    border-radius: 10px;
    color: #fc7656;
    line-height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .shop_number{
    width: 100%;
    height: 160px;
    background-color: #ffffff;
    margin-top: 10px;
    .number{
      width: 100%;
      height: 140px;
      display: flex;
      justify-content: flex-start;
      padding: 20px 0;
      box-sizing: border-box;
      .each{
        min-width: 100px;
        height: 120px;
        padding: 0 40px;
        box-sizing: border-box;
        p{
          line-height: 60px;
        }
        p:last-child{
          font-size: 18px;
        }
      }
      .line{
        width: 1px;
        height: 120px;
        border-right: 1px solid #999;
        box-sizing: border-box;
      }
    }
    .row_line{
      display: none;
      width: 94%;
      height: 1;
      border-top: 1px solid #999;
      box-sizing: border-box;
      // margin: 50px 3% 0;
    }
  }
  .general_situation ,.trend{
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    .title{
      line-height: 40px;
    }
    .tabbar{
      >>> .el-tabs__nav-wrap::after{
        display: none;
      }
      >>> .el-tabs__item{
        width: 85px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        padding: 0;
        margin: 0 10px;
      }
      >>> .el-tabs__item:hover{
        color: #fc7656;
      }
      >>> .el-tabs__item.is-active{
        color: #fc7656;
        border: 1px solid #fc7656;
      }
      >>> .el-tabs__active-bar{
        background-color: transparent;
      }
      .number{
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: flex-start;
        padding: 0px 10px;
        box-sizing: border-box;
        .each{
          height: 80px;
          padding-right: 80px;
          box-sizing: border-box;
          p{
            line-height: 40px;
          }
          p:last-child{
            font-size: 18px;
          }
        }
      }
    }
  }
  .trend{
    height: auto;
  }
</style>
